<!DOCTYPE html>
<html>

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<title>默认显示2行展开收起</title>
		<style type="text/css">
			* {
				/*margin: 0;*/
				padding: 0;
			}
			html {
				font-size: 16px;
			}
			input {
				/*border: 1px solid #666;*/
				border: none;
				width: 250px;
				height: 80px;
				color: #fff;
				font-size: 30px;
				border-radius: 15px;
				margin: 10px;outline: none;
			}
			input:active{appearance: none;}
			.btn1 {
				border-radius: 10px;
				background-image: linear-gradient(hsla(0, 0%, 100%, .05), hsla(0, 0%, 0%, .1));
				box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, .2), inset 0 2px 0 hsla(0, 0%, 100%, .1), inset 0 30px 0 hsla(0, 0%, 100%, 0.05), inset 0 -4px 0 hsla(0, 0%, 100%, .1), inset 0 -5px 0 hsla(0, 0%, 0%, .25), 0 4px 4px hsla(0, 0%, 0%, .05);
			}
			.btn1:active{box-shadow:none;}
			.btn2{
				/*background-image: linear-gradient(to bottom,#cc0000,#555);*/
				/*斜线背景*/
				background-image: url();
				/*噪点背景*/
				/*background-image: url();*/
			}
		</style>
	</head>

	<body>
		<input class="btn1" type="button" name="" id="" value="这是一个按钮" />
		<input class="btn2" type="button" name="" id="" value="这是一个按钮" />
	</body>

</html>